<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>Index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="../amis/sdk/sdk.css" />
    <link rel="stylesheet" href="../amis/sdk/helper.css" />
    <link rel="stylesheet" href="../amis/sdk/iconfont.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="../amis/sdk/sdk.js"></script>
<script type="text/javascript">
    (function () {
        let amis = amisRequire('amis/embed');
        let amisJSON = {
            "type": "page",
            "title": "图一份神闲气静，书几笔悦目赏心",
            "body": [
                {
                    "type": "crud",
                    "syncLocation": false,
                    "api": {
                        "method": "get",
                        "url": "http://localhost:9090/books"
                    },
                    "loadDataOnce": true,
                    "autoGenerateFilter": true,
                    "columns": [
                        {
                            "name": "id",
                            "label": "ID",
                            "type": "text",
                            "searchable": {
                                "type": "input-text",
                                "name": "id",
                                "label": "id",
                                "placeholder": "input id"
                            }
                        },
                        {
                            "name": "name",
                            "label": "Name",
                            "type": "text",
                            "searchable": {
                                "type": "input-text",
                                "name": "name",
                                "label": "name",
                                "placeholder": "input name"
                            }
                        },
                        {
                            "type": "text",
                            "label": "Author",
                            "name": "author",
                            "searchable": {
                                "type": "input-text",
                                "name": "author",
                                "label": "author",
                                "placeholder": "input author"
                            }
                        },
                        {
                            "type": "text",
                            "label": "Price",
                            "name": "price",
                            "searchable": {
                                "type": "input-text",
                                "name": "price",
                                "label": "price",
                                "placeholder": "input price"
                            }
                        },
                        {
                            "type": "text",
                            "label": "Description",
                            "name": "description",
                            "searchable": {
                                "type": "input-text",
                                "name": "description",
                                "label": "description",
                                "placeholder": "input description"
                            },
                            "perPageAvailable": [
                                10
                            ],
                            "placeholder": "-",
                            "toggled": false
                        },
                        {
                            "type": "operation",
                            "label": "Operation",
                            "buttons": [
                                {
                                    "label": "edit",
                                    "type": "submit",
                                    "actionType": "dialog",
                                    "level": "link",
                                    "dialog": {
                                        "title": "Edit",
                                        "body": {
                                            "type": "form",
                                            "api": {
                                                "method": "put",
                                                "url": "http://localhost:9090/books",
                                                "data": {
                                                    "author": "$author",
                                                    "price": "$price",
                                                    "name": "$name",
                                                    "description": "$description",
                                                    "id": "$id"
                                                }
                                            },
                                            "body": [
                                                {
                                                    "name": "name",
                                                    "label": "Name",
                                                    "type": "input-text"
                                                },
                                                {
                                                    "label": "Author",
                                                    "name": "author",
                                                    "type": "input-text"
                                                },
                                                {
                                                    "label": "Price",
                                                    "name": "price",
                                                    "type": "input-number"
                                                },
                                                {
                                                    "label": "Description",
                                                    "name": "description",
                                                    "type": "textarea"
                                                }
                                            ]
                                        }
                                    }
                                },
                                {
                                    "type": "button",
                                    "label": "delete",
                                    "actionType": "ajax",
                                    "level": "link",
                                    "className": "text-danger",
                                    "confirmText": "delete sure？",
                                    "api": {
                                        "method": "Delete",
                                        "url": "http://localhost:9090/books/$id"
                                    }
                                },
                                {
                                    "label": "detail",
                                    "type": "button",
                                    "actionType": "dialog",
                                    "level": "link",
                                    "dialog": {
                                        "title": "Details",
                                        "body": {
                                            "type": "form",
                                            "body": [
                                                {
                                                    "name": "id",
                                                    "label": "ID",
                                                    "type": "static"
                                                },
                                                {
                                                    "name": "name",
                                                    "label": "Name",
                                                    "type": "static"
                                                },
                                                {
                                                    "label": "Author",
                                                    "name": "author",
                                                    "type": "static"
                                                },
                                                {
                                                    "label": "Price",
                                                    "name": "price",
                                                    "type": "static"
                                                },
                                                {
                                                    "label": "Description",
                                                    "name": "description",
                                                    "type": "static"
                                                }
                                            ]
                                        }
                                    }
                                }
                            ]
                        }
                    ],
                    "bulkActions": [
                        {
                            "type": "button",
                            "level": "danger",
                            "label": "批量删除",
                            "actionType": "ajax",
                            "confirmText": "警告：确定要删除？",
                            "api": "delete:http://localhost:9090/books/${ids|raw}"
                        }
                    ],
                    "itemActions": [
                    ],
                    "features": [
                        "create",
                        "filter",
                        "bulkDelete",
                        "bulkUpdate",
                        "update",
                        "delete",
                        "view"
                    ],
                    "filterColumnCount": 10,
                    "headerToolbar": [
                        {
                            "label": "新增",
                            "type": "button",
                            "actionType": "dialog",
                            "level": "primary",
                            "dialog": {
                                "title": "New",
                                "body": {
                                    "type": "form",
                                    "api": {
                                        "method": "post",
                                        "url": "http://localhost:9090/books"
                                    },
                                    "body": [
                                        {
                                            "type": "input-text",
                                            "name": "name",
                                            "label": "Name",
                                            "required": true
                                        },
                                        {
                                            "type": "input-text",
                                            "name": "author",
                                            "label": "Author",
                                            "required": true
                                        },
                                        {
                                            "type": "input-number",
                                            "name": "price",
                                            "label": "Price",
                                            "required": true
                                        },
                                        {
                                            "type": "textarea",
                                            "name": "description",
                                            "label": "Description",
                                            "required": true
                                        }
                                    ]
                                }
                            }
                        },
                        "bulkActions"
                    ],
                    "id": "u:b354132b781e",
                    "perPageAvailable": [
                        10
                    ],
                    "messages": {
                    },
                }
            ],
            "messages": {
            },
            "style": {
            },
            "remark": "绝不再写图书管理系统，我保证。"
        };
        let amisScoped = amis.embed('#root', amisJSON);
    })();
</script>
</body>
</html>